<template>
  <div class="min-h-screen " style="background: #111213">
    <div class="mx-auto px-6" style="min-width: 1000px; padding: 0 80px">
      <header class="flex items-center mb-6 pt-4">
        <img src="../../assets/img/promote/ai_txt.svg" class="mr-2 w-10 h-10 ml-3" alt="">
        <h1 class="text-2xl font-semibold text-white">AI商品素材生成</h1>
      </header>

      <section class="bg-white rounded-2xl p-6 mb-8 overflow-hidden" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
        <!-- 商品选择器 -->
        <div class="mb-6">
          <h2 class="text-lg font-semibold mb-3">选择商品</h2>
          <div class="flex gap-3 overflow-x-auto pb-2">
            <div
                v-for="(product, index) in productLists"
                :key="index"
                @click="selectedProductIndex = index"
                class="flex-shrink-0 w-64 border rounded-lg p-3 cursor-pointer transition-all"
                :class="selectedProductIndex === index ? 'border-blue-500 bg-blue-50' : 'border-gray-200'"
            >
              <div class="flex items-center">
                <div class="w-12 h-12 rounded-md bg-gray-200 flex-shrink-0 overflow-hidden border border-gray-300">
                  <img :src="product.img_urls" :alt="product.product_name" class="w-full h-full object-cover">
                </div>
                <div class="ml-2 text-sm font-medium truncate">{{ product.product_name }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 商品信息展示 -->
        <div class="flex" v-if="currentProduct">
          <div>
            <div class="flex items-center mb-3 select-none cursor-pointer">
              <div class="font-bold text-gray-700">基本信息</div>
              <div class="ml-1"><img src="../../assets/img/promote/edit.svg" alt=""></div>
            </div>
            <div class="col-span-5 w-96 flex gap-4 items-start rounded-xl bg-gray-100 px-4 py-4">
              <div class="w-16 h-16 rounded-md bg-gray-200 flex-shrink-0 overflow-hidden border border-gray-300">
                <img :src="currentProduct.img_urls" :alt="currentProduct.product_name"
                     class="w-full h-full object-cover">
              </div>
              <div class="flex-1">
                <h2 class="text-base font-semibold">{{ currentProduct.product_name }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ currentProduct.short_description }}</p>

                <div class="mt-3 flex items-center gap-3">
                  <div class="text-xl font-bold text-red-600">{{ currentProduct.price }}</div>
                  <div class="ml-auto text-sm text-gray-400">近7天销量 {{ currentProduct.last_7_sale }}</div>
                </div>

                <div class="mt-3 text-sm text-gray-500 gap-2" style="line-height: 22px">
                  <div><span class="font-bold">库存：</span>{{ currentProduct.inventory }}</div>
                  <div><span class="font-bold">销量：</span>{{ currentProduct.total_sale }}</div>
                  <div><span class="font-bold">产地：</span>{{ currentProduct.origin }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="flex-1 ml-4">
            <div class="flex items-center mb-3 select-none cursor-pointer">
              <div class="font-bold text-gray-700">商品属性</div>
              <div class="ml-1"><img src="../../assets/img/promote/edit.svg" alt=""></div>
            </div>

            <div class="bg-gray-100 rounded-xl">
              <div class="grid grid-cols-3 grid-rows-2 gap-3 px-4 py-4 min-w-xl">
                <div class="rounded-lg">
                  <div class="text-xs text-gray-400">商品分类</div>
                  <div class="mt-1 font-medium">{{ currentProduct.property }}</div>
                </div>
                <div class="rounded-lg">
                  <div class="text-xs text-gray-400">材质成分</div>
                  <div class="mt-1 font-medium">{{ currentProduct.材质成分 }}</div>
                </div>
                <div class="rounded-lg">
                  <div class="text-xs text-gray-400">适用场景</div>
                  <div class="mt-1 font-medium">{{ currentProduct.适用场景 }}</div>
                </div>
                <div class="rounded-lg">
                  <div class="text-xs text-gray-400">颜色</div>
                  <div class="font-medium flex gap-2.5 mt-2">
                    <div
                        v-for="(color, idx) in currentProduct.颜色"
                        :key="idx"
                        class="w-4 h-4 border border-gray-200 rounded-full"
                        :style="{ backgroundColor: color }">
                    </div>
                  </div>
                </div>
                <div class="rounded-lg">
                  <div class="text-xs text-gray-400">发货地</div>
                  <div class="mt-1 font-medium">{{ currentProduct.发货地 || currentProduct.发货地址 }}</div>
                </div>
                <div class="rounded-lg" v-for="(value, key) in getAdditionalProperties(currentProduct)" :key="key">
                  <div class="text-xs text-gray-400">{{ key }}</div>
                  <div class="mt-1 font-medium">{{ value }}</div>
                </div>
              </div>
            </div>

            <div class="flex items-center mb-1 mt-2 select-none cursor-pointer">
              <div class="font-bold text-gray-700">核心卖点</div>
              <div class="ml-1"><img src="../../assets/img/promote/edit.svg" alt=""></div>
            </div>

            <div class="mt-2 flex items-center gap-2 flex-wrap">
              <span
                  v-for="(point, idx) in currentProduct.selling_point.split('，')"
                  :key="idx"
                  class="px-2 py-1 bg-orange-100 text-orange-400 rounded text-xs">
                {{ point }}
              </span>
            </div>
          </div>
        </div>

        <div v-if="currentProduct">
          <div class="mt-6">
            <div class="flex gap-1 flex-wrap p-1.5 rounded-full" style="background: #ebeffb">
              <button v-for="lang in languages" :key="lang" @click="activeLang = lang"
                      class="cursor-pointer select-none transition"
                      :class="['px-8 py-3 rounded-full text-sm font-bold', activeLang === lang ? 'bg-white text-gray-700' : 'bg-transparent text-gray-600']">
                {{ lang }}
              </button>
            </div>

            <div class="mt-4 p-4 border border-gray-300 rounded-2xl min-h-[136px]">
              <p class="text-sm text-gray-600">{{ languageContent[activeLang] }}</p>
            </div>
          </div>
        </div>

        <!-- AI image & text generation cards -->
        <div class="mt-6 flex" v-if="currentProduct">
          <div class="w-[600px] min-w-[600px] mr-4">
            <div class="font-bold text-lg mb-2 flex items-center">
              <div><img src="../../assets/img/promote/ai_img.svg" class="w-6 h-6 mr-1" alt=""></div>
              智能美化
            </div>

            <div class="flex gap-3 h-60">
              <div class="select-none cursor-pointer border border-gray-200 rounded-lg flex-1">
                <div><img class="rounded-t-lg" src="../../assets/img/promote/空气炸锅海报.jpg" alt=""></div>
                <div class="p-4">
                  <div class="font-medium mb-0.5">智能图片美化</div>
                  <div class="text-sm text-gray-500">点击率预估：<span class="text-green-600">+18%</span></div>
                </div>
              </div>
              <div class="select-none cursor-pointer border border-gray-200 rounded-lg flex-1">
                <div><img class="rounded-t-lg" src="../../assets/img/promote/跑步机海报.png" alt=""></div>
                <div class="p-4">
                  <div class="font-medium mb-0.5">智能视频生成</div>
                  <div class="text-sm text-gray-500">点击率预估：<span class="text-green-600">+12%</span></div>
                </div>
              </div>
            </div>
          </div>

          <div class="flex-1">
            <div class="font-bold text-lg mb-2.5 flex items-center">
              <div><img src="../../assets/img/promote/ai_txt_gen.svg" class="w-5 h-5 mr-1" alt=""></div>
              文案生成
            </div>

            <div class="flex justify-between">

              <div class="flex gap-3 mb-3 min-w-[300px]">
                <div v-for="(item, idx) in ['主图文案','短视频文案','详情页文案']"
                     class="border px-2 py-1 rounded text-sm cursor-pointer select-none transition" :class="{
                'border-blue-600': text_gen_tab_index === idx,
                'border-gray-300': text_gen_tab_index !== idx,
                'text-blue-600': text_gen_tab_index === idx,
                'text-gray-600': text_gen_tab_index !== idx,
                'font-bold': text_gen_tab_index === idx,
              }" @click="text_gen_tab_index = idx">
                  {{ item }}
                </div>
              </div>
              <div>
                <input type="text" v-model="txt_target_lang"
                       class="border border-gray-300 w-30 px-4 py-1 rounded-full text-sm " placeholder="目标语言"/>
              </div>
            </div>

            <div class="p-4 border border-gray-200 bg-gray-100 rounded-lg">
              <div class=" text-sm text-gray-800 min-h-[150px]">
                <p>{{ generatedTxt }}</p>
              </div>
              <div @click="polishTextStream" class="flex">
                <div
                    class="select-none cursor-pointer bg-blue-700 px-3 pr-4 hover:shadow-2xl rounded-lg text-sm flex justify-center items-center h-8 text-white font-bold mt-4"
                    :style="{
                    opacity: isGenerating?0.5:1
                    }">
                  <img src="../../assets/img/promote/magic.svg" class="w-5 h-5" alt="">{{
                    isGenerating ? '生成中…' : '立即生成'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <header class="flex items-center mb-6 pt-0">
        <img src="../../assets/img/promote/digital_person.svg" class="mr-2 w-10 h-10 ml-3" alt="">
        <h1 class="text-2xl font-semibold text-white">数字人直播</h1>
      </header>

      <!-- Digital Avatar / Live -->
      <section class="bg-white rounded-2xl px-6 py-4 mb-8" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
        <div class="flex">
          <div class="">
            <div class="w-[500px]">
              <div class="font-semibold ">选择数字人形象</div>
              <div class="flex gap-2 mt-2">
                <button v-for="(a, idx) in avatars" :key="a.id" @click="selectedAvatar = a.id"
                        :class="['flex flex-1 items-center gap-2 p-2 rounded-lg transition border-[1.5px] cursor-pointer select-none', selectedAvatar === a.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200']">
                  <div class="w-8 h-8 rounded bg-gray-100 overflow-hidden">
                    <img :src="a.img" alt="avatar" class="w-full h-full object-cover"/>
                  </div>
                  <div class="flex flex-col items-start">
                    <div class="text-sm font-bold text-gray-800">{{ a.name }}</div>
                    <div class="text-[12px] text-gray-500">{{ a.tip }}</div>
                  </div>
                </button>
              </div>

              <div>
                <div class="font-semibold mt-3 select-none">直播脚本配置</div>
                <select v-model="talkMode"
                        class="mt-2 p-2 border border-gray-300 cursor-pointer select-none bg-gray-100 outline-0 rounded w-full text-sm">
                  <option value="专业讲解模式">专业讲解模式</option>
                </select>
              </div>

              <div>
                <div class="font-semibold mt-3 select-none">讲解时长控制</div>
                <select v-model="talkLength"
                        class="mt-2 p-2 border border-gray-300 cursor-pointer select-none bg-gray-100 outline-0 rounded w-full text-sm">
                  <option value="30s">30s</option>
                  <option value="45s">45s</option>
                  <option value="60s">60s</option>
                </select>
              </div>
            </div>
          </div>

          <div class="flex-1 ml-3">
            <div class="border border-gray-300 relative rounded-lg h-64 flex items-center justify-center bg-gray-50">

              <video src="../../assets/img/promote/空气炸锅.mp4" class="h-full" controls></video>

              <div class="absolute left-3 top-3">
                <div class="text-sm bg-red-600 rounded px-3 py-1 text-white font-semibold">直播素材</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <header class="flex items-center mb-6 pt-0">
        <img src="../../assets/img/promote/ad.svg" class="mr-2 w-10 h-10 ml-3" alt="">
        <h1 class="text-2xl font-semibold text-white">广告投放</h1>
      </header>

      <!-- Ads -->
      <section class="bg-white rounded-2xl p-6 mb-8 pt-4" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
        <h3 class="font-semibold mb-3">投放建议</h3>
        <div class="flex">
          <div class="">
            <div class="p-4 pt-3 border border-blue-400 bg-blue-100 rounded-lg w-[400px]">
              <div class="flex justify-between">
                <div class="text-base font-bold text-blue-800">平台建议</div>
                <div class="bg-blue-200 px-2 py-1 text-blue-700 font-bold rounded text-sm">推荐</div>
              </div>
              <p class="mt-2 text-sm text-gray-500">根据商品特性，建议重点投放小红书、抖音平台，目标人群为25-35岁女性。</p>
              <div class="mt-3 flex flex-wrap gap-2">
                <span class="text-sm bg-orange-100 text-orange-500 font-bold px-2 py-1 rounded">小红书种草</span>
                <span class="text-sm bg-orange-100 text-orange-500 font-bold px-2 py-1 rounded">抖音短视频</span>
                <span class="text-sm bg-orange-100 text-orange-500 font-bold px-2 py-1 rounded">微博图文</span>
              </div>
            </div>
          </div>

          <div class="flex-1 ml-3">
            <div class="p-4 pt-3 border h-full border-orange-300 bg-orange-50 rounded-lg">
              <div class="flex items-center justify-between">
                <div class="text-base font-bold text-orange-900">关键词策略</div>
                <div class="bg-orange-200 px-2 py-1 text-orange-700 font-bold rounded text-sm">高转化</div>
              </div>

              <div class="text-base mt-3">系统推荐关键词组合，CTR提升预估35%</div>

              <div class="mt-4 flex flex-wrap gap-2">
                <span class="text-sm bg-pink-200 text-pink-500 font-bold px-3 py-1 rounded">空气炸锅</span>
                <span class="text-sm bg-pink-200 text-pink-500 font-bold px-3 py-1 rounded">厨房好物</span>
                <span class="text-sm bg-pink-200 text-pink-500 font-bold px-3 py-1 rounded">蒸烤煎炸</span>
                <span class="text-sm bg-pink-200 text-pink-500 font-bold px-3 py-1 rounded">烧烤</span>
              </div>
            </div>
          </div>
        </div>


      </section>

      <div class="flex justify-center items-center mb-20 mt-10">
        <div @click="toOperate"
             class="px-10 py-3 bg-blue-600 rounded-full text-white font-bold cursor-pointer select-none transition shadow hover:shadow-2xl">
          下一步，前往运营页面 →
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'

const text_gen_tab_index = ref(0)
const selectedProductIndex = ref(0)

const isGenerating = ref(false)

const txt_target_lang = ref('英文')

const toOperate = () => {
  window.location.href = "/operate"
}

async function polishTextStream() {
  if (isGenerating.value) return
  generatedTxt.value = ""
  isGenerating.value = true
  try {
    const response = await fetch('/api/gpt/polish_txt_stream', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        messages: [
          {
            role: "user",
            content: `${JSON.stringify(productLists[selectedProductIndex.value])} \n\n\n 你好，帮我根据上面的商品参数，生成一份适用于电商平台的${['主图文案', '短视频文案', '详情页文案'][text_gen_tab_index.value]}，目标语言为${txt_target_lang.value}，将回答生成为完整的一段内容。同时，你需要考虑到对应语言国家的文化禁忌`
          }
        ],
        model: "deepseek-chat",
        temperature: 0.7
      })
    });

    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 获取响应体的 readable stream
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let buffer = '';

    while (true) {
      const {done, value} = await reader.read();
      if (done) {
        console.log("流传输完成");
        isGenerating.value = false
        break;
      }
      buffer += decoder.decode(value, {stream: true});
      const lines = buffer.split('\n\n');
      buffer = lines.pop(); // 保留不完整的行
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.substring(6);
          if (data === '[DONE]') {
            console.log("传输完成");
            isGenerating.value = false
            return;
          }
          try {
            const parsedData = JSON.parse(data);
            if (parsedData.choices && parsedData.choices.length > 0) {
              const content = parsedData.choices[0].delta?.content;
              if (content) {
                processTxtContent(content)
              }
            }
          } catch (e) {
          }
        }
      }
    }
  } catch (error) {
    console.error("请求出错:", error);
  }
}

const generatedTxt = ref("选择你想生成的文案 → 选择目标语言 → 点击「立即生成」按钮，根据你所填写的商品内容，自动生成对应的文案")

const processTxtContent = (res) => {
  generatedTxt.value += res
}


const languages = ['中文', '日文', '法语', '泰文', '马来语', '俄语']
const activeLang = ref('中文')

const languageContent = {
  '中文': '在以中文为主的中国市场，文化禁忌主要围绕数字谐音和颜色寓意展开。最关键的是务必避免使用数字“4”，因其发音与“死”相近，被视为极不吉利，因此在产品型号、套装数量或定价上应彻底规避。相反，数字“8”（发）和“6”（顺）则广受欢迎。颜色方面，虽然白色电器已被普遍接受，但应避免在节日礼品包装上大面积使用纯白色，因其常与丧事关联；而红色则象征着吉祥与喜庆，是用于促销和包装的安全选择。此外，产品质量和中国的CCC安全认证是消费者信任的基石，缺乏认证的产品几乎无法流通。还需注意，切勿将产品作为“钟”赠送他人，因“送钟”与“送终”同音，是极大的社交忌讳。',
  '日文': '在日本市场，文化禁忌源于极致的礼貌和对细节的苛求。数字上，必须严格避开“4”（し/死） 和“9”（く/苦），因其与“死亡”和“痛苦”同音。日本消费者将电器视为重要的礼品（如中元、岁暮赠礼），因此产品包装必须精美绝伦、无可挑剔，任何污损都会严重影响品牌形象。产品本身必须满足日本严苛的PSE安全认证和100V电压标准，并格外注重节能、静音和紧凑设计以适应有限的居住空间。所有随附的说明书必须是准确、详尽的日文版本，否则会直接导致退货和差评。在营销沟通中，语气必须保持谦逊恭敬，避免夸张的广告词，并提供高效、礼貌的客户服务。',
  '法语': '在以法语为主的法国市场，最大的文化禁忌是忽视其语言自豪感。所有产品信息、说明书、营销材料和客户服务必须使用正确、地道的法语，使用英语或其他语言会被视为不尊重。法国消费者拥有极高的审美品味，电器产品的设计须兼具功能性与艺术性，单调或粗糙的设计难以吸引他们。此外，他们拥有强烈的环保意识，会优先选择高能效等级（如A+++）、环保材料和可回收包装的产品。产品必须符合欧盟CE认证标准，并使用欧标两圆插头。在广告呈现上，应注重生活美学和品质提升，而非单纯强调价格折扣。',
  '泰文': '在泰国市场，文化禁忌与对王室及佛教的至高尊敬紧密相连。绝对不可有任何侮辱或看似不尊重泰国国王及王室成员的言行或设计，这是不可逾越的红线。在宗教方面，严禁将佛像或神圣的佛教符号用于产品装饰，这是极大的亵渎。在日常生活中，脚被视为不洁的部位，因此切勿用脚指向产品或移动包装。颜色上，紫色与丧事相关需谨慎使用，而黄色是王室的象征色，也应避免滥用。鉴于泰国炎热潮湿的气候，电器产品需要具备良好的防潮、防雷击和散热性能，以满足当地的使用需求。',
  '马来语': '在马来语为主的马来西亚市场，文化禁忌主要受伊斯兰教教义影响。虽然电器不入口，但任何与食品加工相关的产品（如电饭煲、烤箱、榨汁机）若能获得清真（Halal）认证将是巨大优势，这确保了生产过程中未使用任何伊斯兰教禁忌物（如猪油衍生物）。营销中必须彻底避免出现猪、狗等图像。在社会习俗上，左手被认为是不洁的，因此递交物品或产品时应使用右手。黄色是马来西亚王室的颜色，使用需保持尊重。由于该国是多民族社会（马来裔、华裔、印度裔），提供多语种（马来语、英语、中文）支持能更好地覆盖目标客群。',
  '俄语': '在俄罗斯市场，文化禁忌相对直接但仍需注意。西方文化中常见的数字“13”被视为不吉利的数字，应尽量避免在产品编号或定价中使用。在颜色方面，虽然红色是积极的颜色（象征美丽），但需避免将黑色与黄色搭配在一起，因为这一组合在某些语境下代表“嫉妒”与“不幸”。俄罗斯消费者更看重产品的坚固性、耐用性和大功率，以适应其寒冷的气候和宽裕的居住空间。产品必须符合俄罗斯强制性的GOST-R（EAC）认证标准，并使用欧标两圆插头。在营销沟通上，可以采取更为直接的方式，突出产品的核心优势、耐用性和折扣力度。'
}

import person_1 from "../../assets/img/promote/person_1.png"
import person_2 from "../../assets/img/promote/person_2.png"
import person_3 from "../../assets/img/promote/person_3.png"
import axios from "axios";

const productLists = [
  {
    "product_name": "**空气炸锅（KL55-VF531 款）",
    "img_urls": "https://2b.zol-img.com.cn/product/209/411/ceEJ5TEUyvz2.jpg",
    "short_description": "5.5L 大容量腔体，搭载 360° 热风循环技术，1800W 大功率速炸，无需翻面即可实现外脆里嫩，支持 8 大预设菜单，低脂烹饪更健康，适合 3-5 人家庭使用。",
    "price": "￥399",
    "last_7_sale": 89,
    "total_sale": 26542,
    "inventory": 1876,
    "origin": "****",
    "property": "小家电 > 厨房电器 > 烹饪电器 > 空气炸锅",
    "材质成分": "食品接触级不粘涂层（PTFE）30%，耐高温塑料（PP）55%，不锈钢（SUS304 发热盘）15%",
    "适用场景": "家庭厨房（日常炸制、烘焙、复热）、租房小厨房、小型聚餐",
    "颜色": ["#FFFFFF（奶白）", "#333333（深空灰）", "#696969"],
    "核心参数": "额定功率 1800W，容量 5.5L，控温范围 80-200℃，定时范围 0-60 分钟",
    "发货地": "****、****（双仓发货，就近调配）",
    "selling_point": "大容量不粘易清洁，360° 热风无死角，低脂健康少油烟，预设菜单易操作，大功率速炸省时间"
  },
  {
    "product_name": "**彩色打印机DeskJet Ink Advantage Ultra 4925",
    "img_urls": "https://www.dyjqd.com/uploads/allimg/2412/HP_DeskJet_4925.jpg",
    "short_description": "集打印、复印、扫描功能于一体，支持彩色无线喷墨打印。",
    "price": "599",
    "last_7_sale": 130,
    "total_sale": 10500,
    "inventory": 12900,
    "origin": "上海",
    "property": "办公>办公设备>打印机",
    "材质成分": "60%再生塑料",
    "适用场景": "办公室/工作室",
    "颜色": ["#F5F5F5"],
    "尺寸": "425* 304* 154mm",
    "发货地": "江苏南京",
    "selling_point": "彩色打印、打印速度快、分辨率高、移动打印"
  },
  {
    "product_name": "**电饭煲（SR-HG153-W 款）",
    "img_urls": "https://2e.zol-img.com.cn/product/214/740/cejwNVJmULT5o.jpg",
    "short_description": "集煮饭、煮粥、蒸煮、酸奶制作功能于一体，搭载 IH 电磁加热技术，支持智能预约，4.0L 容量适配 2-6 人家庭。",
    "price": "￥999",
    "last_7_sale": 112,
    "total_sale": 28650,
    "inventory": 876,
    "origin": "江苏苏州",
    "property": "小家电 > 厨房电器 > 烹饪电器 > 电饭煲",
    "材质成分": "55% 食品级 PP 塑料（外壳）、30% SUS304 不锈钢（内胆）、15% 食品级硅胶（密封圈）",
    "适用场景": "家庭厨房日常烹饪、多代同堂用餐、朋友小聚备餐",
    "颜色": ["#FFFFFF（奶白主体）"],
    "尺寸": "356278215mm",
    "发货地": "****、****、****（三仓发货，就近调配）",
    "selling_point": "IH 电磁加热受热匀、4.0L 大容量够家用、智能预约省时间、多功能适配全场景、内胆安全易清洁"
  },
  {
    "product_name": "***划船机 950",
    "img_urls": "https://www.merach.com/Public/upfiles/2024/05/07/6639e13fb7097.jpg",
    "short_description": "集磁阻调节、数据监测、折叠收纳功能于一体，搭载静音磁控系统，支持 16 档阻力调节，适配新手到进阶用户，满足家庭全身有氧训练需求。",
    "price": "￥2399",
    "last_7_sale": 205,
    "total_sale": 18760,
    "inventory": 1532,
    "origin": "****（***智能健身器材生产基地）",
    "property": "运动健身 > 健身器材 > 有氧器械 > 划船机",
    "材质成分": "60% 高密度钢材（机身框架，承重稳固）、25% 环保 ABS 塑料（控制面板及防护件）、10% 高弹 PU 材质（坐垫 / 握把，防滑耐磨）、5% 钢化玻璃（水箱款专用，通透耐用）",
    "适用场景": "家庭客厅 / 阳台健身、小户型居家锻炼、个人日常减脂塑形、多人家庭共享健身",
    "颜色": ["#006400", "#FFFFFF", "#333333"],
    "尺寸": "展开 1850510630mm，折叠后 8805101120mm（节省 60% 收纳空间）",
    "发货地": "****",
    "selling_point": "健康运动、有氧运动"
  },
  {
    "product_name": "**U4跑步机",
    "img_urls": "http://23350469.s21i.faiusr.com/4/ABUIABAEGAAgzOOTwwYo5ZCpzQQwoAY4oAY.png",
    "short_description": "集静音跑步、坡度调节、折叠收纳功能于一体，搭载减震降噪系统，支持 12 档速度调节 + 3 档手动坡度，适配新手慢跑、进阶燃脂等需求，满足家庭日常有氧健身场景。",
    "price": "￥1999",
    "last_7_sale": 186,
    "total_sale": 15280,
    "inventory": 1245,
    "origin": "****（**智能健身器材生产基地）",
    "property": "运动健身 > 健身器材 > 有氧器械 > 跑步机",
    "材质成分": "55% 高强度钢材（机身框架，承重达 120kg）、30% 环保 ABS 塑料（控制面板 + 防护外壳）、10% 高弹 EVA 材质（跑带底层，减震耐磨）、5% 硅胶（扶手防滑套，提升握持感）",
    "适用场景": "家庭客厅 / 卧室健身",
    "颜色": ["#FFFFFF", "#333333", "#1E90FF"],
    "尺寸": "展开 17007501200mm，折叠后 9807501500mm（节省 40% 收纳空间，立放不占地）",
    "发货地": "****",
    "selling_point": "静音减震设计、多档调节适配、便捷折叠收纳、智能数据监测、安全细节防护"
  },
  {
    "product_name": "**智能恒温器",
    "img_urls": "https://img.alicdn.com/bao/uploaded/O1CN01mgeVkr1PZdSFxxi6a_!!6000000001855-0-yinhe.jpg",
    "short_description": "集智能控温、远程操控、节能省电功能于一体，搭载精准传感系统，支持 0.5℃精细温度调节 + 多时段定时模式，适配家庭日常控温、老人儿童专属温度设定等需求，满足居家、公寓、小型办公场所恒温场景。",
    "price": "￥299",
    "last_7_sale": 235,
    "total_sale": 18640,
    "inventory": 1580,
    "origin": "****（**智能电子生产基地）",
    "property": "智能家居 > 智能温控 > 恒温设备 > 智能恒温器",
    "材质成分": "45% 阻燃 ABS 塑料（机身外壳，防火安全）、30% 铝合金（面板边框，质感耐磨）、15% 高精度传感器组件（温度感应，精准控温）、10% 硅胶（按键防滑垫 + 接口防护套，提升使用感与安全性）",
    "适用场景": "家庭客厅 / 卧室 / 书房、小型公寓、办公独立空间",
    "颜色": ["#FFFFFF", "#333333", "#E5E5E5"],
    "尺寸": "直径 85mm × 厚度 22mm（超薄机身，节省安装空间，适配多种墙面风格）",
    "发货地": "****",
    "selling_point": "精准控温、远程智能操控、节能省电、多模式适配、安全防护"
  },
  {
    "product_name": "** LED 灯泡",
    "img_urls": "https://img.alicdn.com/i1/1136085610/TB23ODUap95V1Bjy0FcXXalkpXa_!!1136085610.jpg",
    "short_description": "集节能照明、柔光护眼、长效耐用功能于一体，搭载优质 LED 灯珠，支持 3 档色温调节（暖光 3000K / 自然光 4500K / 白光 6500K）+ 多功率可选（5W/8W/12W），适配卧室氛围照明、客厅基础照明、厨房工作照明等需求，满足家庭全场景用光及商用基础照明场景。",
    "price": "￥19.9（5W 单只装）、￥29.9（8W 单只装）、￥39.9（12W 单只装）",
    "last_7_sale": 586,
    "total_sale": 28950,
    "inventory": 3240,
    "origin": "****（**电器照明生产基地）",
    "property": "家居建材 > 照明灯具 > LED 照明 > LED 灯泡",
    "材质成分": "50% 高透光 PC 材质（灯罩，透光率达 95%，柔光不刺眼）、25% 阻燃 PP 塑料（灯座外壳，耐高温防灼烧）、15% 优质 LED 灯珠（发光核心，低光衰长寿命）、10% 纯铜导电线（电流传导，稳定不发热）",
    "适用场景": "家庭卧室 / 客厅 / 厨房 / 卫生间、便利店、办公室、出租屋",
    "颜色": ["灯罩 #FFFFFF、灯座 #333333、#FFFFFF"],
    "尺寸": "直径 50mm × 高度 110mm（标准 E27 螺口，适配多数灯座，小巧不占空间）",
    "发货地": "****",
    "selling_point": "节能省电（相比传统白炽灯省电 80%，12W 亮度媲美 100W 白炽灯）、柔光护眼（无频闪无蓝光危害，Ra80 高显色指数，还原物体真实色彩）、长效耐用（灯珠寿命达 25000 小时，每天使用 8 小时可用 8 年）、多色温调节（一键切换暖光温馨 / 自然光舒适 / 白光明亮，适配不同场景）、安全可靠（阻燃材质 + 过压保护，潮湿环境可安全使用，符合国家 3C 认证）"
  }
]

// 计算属性：当前选中的商品
const currentProduct = computed(() => {
  return productLists[selectedProductIndex.value]
})

// 获取额外属性（除固定字段外的其他属性）
const getAdditionalProperties = (product) => {
  const fixedKeys = ['product_name', 'img_urls', 'short_description', 'price', 'last_7_sale',
    'total_sale', 'inventory', 'origin', 'property', '材质成分', '适用场景',
    '颜色', '发货地', '发货地址', 'selling_point']
  const additional = {}

  Object.keys(product).forEach(key => {
    if (!fixedKeys.includes(key)) {
      additional[key] = product[key]
    }
  })

  return additional
}

const avatars = [
  {id: 'a1', name: '知性白领', tip: '适合讲解型直播', img: person_1},
  {id: 'a2', name: '活力主播', tip: '适合促销型直播', img: person_2},
  {id: 'a3', name: '时尚达人', tip: '适合穿搭类展示', img: person_3}
]
const selectedAvatar = ref('a1')
const talkMode = ref('专业讲解模式')
const talkLength = ref('30s')
</script>

<style>
/* If you need extra styles, add them here. Tailwind utility classes provide the spacing and layout. */
</style>